<template>
    <IContent :loading="loading" v-model="componentProps">
        <Table :columns="table.columns" row-key="id" :load-data="handleLoadData" :loading="loading" size="small"
               :data="table.data" ref="Table" :height="tableHeight" style="height: 100%;" :stripe="true"
               :id="uuid">
            <template slot-scope="{ row, index }" slot="action"></template>
        </Table>

        <component slot="component" v-if="componentProps.value" :is="componentProps.view" v-model="componentProps.value"
                   :props="componentProps.props"
                   @input="getLists(page.current)"></component>
    </IContent>
</template>

<script>
    import IContent from "../../../../../components/layout/IContent";
    import IContentMixins from "../../../../../mixins/iContentMixins";
    import ISearch from "../../../../../components/layout/ISearch";
    import ITable from "../../../../../components/layout/ITable";
    import {getRandomStr} from "view-design/src/components/table/util";

    export default {
        name: "index",
        components: {ITable, ISearch, IContentMixins, IContent},
        mixins: [IContentMixins],
        data() {
            return {
                tableHeight: 0,
                table: {
                    columns: [
                         {
                            title: '名称',
                            key: 'name',
                            tree: true
                        }, {
                            title: '行政代码',
                            key: 'area_code'
                        },{
                            title: '简称',
                            key: 'short_name'
                        }, {
                            title: '组合名',
                            key: 'merger_name'
                        }, {
                            title: '拼音',
                            key: 'pinyin'
                        }
                    ]
                },
                search: {}
            }
        },
        computed: {
            uuid() {
                return getRandomStr(12);
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.tableHeight = document.getElementById(this.uuid).clientHeight;
            });
        },
        methods: {
            getLists(page, parent_id = 0) {
                this.loading = true;
                this.$http.get(`system/dictionary/region`, {
                    params: Object.assign({parent_id})
                }).then((data) => {
                    this.table.data = data.map((item) => {
                        item._loading = false;
                        item.children = [];
                        return item;
                    });
                }).finally(() => {
                    this.loading = false;
                });
            },
            handleLoadData(item, callback) {
                this.$http.get(`system/dictionary/region`, {
                    params: Object.assign({parent_id: item.id})
                }).then((data) => {
                    callback(data.map((item) => {
                        item._loading = false;
                        item.children = [];
                        return item;
                    }));
                });
            }
        }
    }
</script>

<style scoped>

</style>
